<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>员工证书</title>
    <link rel="stylesheet" href="../../Style/ljk-css/员工证书.css">
    <link rel="stylesheet" href="../../Style/ljk-fonts/font_3601254_lmp1u1hat7g/iconfont.css">
    <link rel="stylesheet" href="../../Style/ljk-css/font-awesome.css">

    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
        integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css"
        integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">



</head>

<body>
    <div class="header">
        <div class="nav-text"> <span>OA后台管理系统</span></div>

        <div class="nav-Home-father">
            <div class="nav-Home">
                <div class="nav-Home-top"><span class="iconfont icon-shouye"></span>
                </div>
                <div class="nav-Home-bottom"><span>首页</span></div>
            </div>
        </div>

        <div class="nav-classify-father">
            <div class="nav-classify">
                <div class="nav-classify-top"><span class="iconfont icon-fenleiorguangchangorqitatianchong"></span>
                </div>
                <div class="nav-classify-bottom"><span>应用中心</span></div>
            </div>
        </div>
        <!-- 搜索模块 -->
        <div class="search">
            <input type="text" value="请输入关键字">
            <button></button>
        </div>
        <div class="user">
            <div class="user-one">
                <span class="iconfont icon-lingdang"></span>
            </div>
            <div class="user-two">
                <img src="./imgs/heder_person.png" alt="">
            </div>
            <div class="user-three">
                <p><strong>Dasic</strong> </p>
            </div>

            <div class="user-four">
                <span class="iconfont icon-xiajiantou">
                </span>

            </div>

            <div class="dropdown">
                <button onclick="myFunction()" class="dropbtn">下拉菜单</button>
                <div id="myDropdown" class="dropdown-content">
                    <a href="#home">重置密码</a>
                    <a href="#about">退出系统</a>

                </div>
            </div>
        </div>

    </div>
    <div class="function">

        <div class="content_body_left">
            <ul>
                <!-- 列表一 -->
                <li class="content_body_left_li">
                    <img src="./img/content/content_peoples.png" class="content_body_left_img1">
                    <span>员工管理</span>
                    <img src="../img/content/content_key_up.png" class="content_body_left_img2">
                    <ul class="content_body_left_list">
                        <li>花名册</li>
                        <li>员工档案</li>
                    </ul>
                </li>
                <!-- 列表二 -->
                <li>
                    <img src="./img/content/content_square.png" class="content_body_left_img1">
                    <span>员工关系</span>
                    <img src="./img/content/content_key_up.png" class="content_body_left_img2">
                    <ul class="content_body_left_list">
                        <li>入职管理</li>
                        <li>转正管理</li>
                        <li>人事调动</li>
                        <li>离职管理</li>
                        <li>异动记录</li>
                        <li>合同管理</li>
                    </ul>
                </li>
                <!-- 列表三 -->

                <li>
                    <img src="./img/content/content_table.png" class="content_body_left_img1">
                    <span>统计分析</span>
                    <img src="./img/content/content_key_up.png" class="content_body_left_img2">
                    <ul class="content_body_left_list">
                        <li>员工概况</li>
                        <li>趋势分析</li>
                    </ul>
                </li>
                <!-- 列表四 -->
                <li>
                    <img src="./img/content/content_set_up.png" class="content_body_left_img1">
                    <span>员工设置</span>
                    <img src="./img/content/content_key_up.png" class="content_body_left_img2">
                    <ul class="content_body_left_list">
                        <li>员工档案字段设置</li>
                        <li>人事审批表单设置</li>
                        <li>人事规则设置</li>
                    </ul>
                </li>
            </ul>
        </div>

        <div class="function-content">
            <div class="function-content-top"><span>员工</span>><span>员工管理</span>><span>员工档案</span>
            </div>
            <div class="function-content-min">
                <div class="function-content-min-son1">
                    <span>教育经历</span> &nbsp&nbsp
                    <span>工作经历</span> &nbsp&nbsp
                    <span>家庭成员</span> &nbsp&nbsp
                    <span>员工证书</span>&nbsp&nbsp
                </div>
                <div class="function-content-mind-son2">
                    <div class="function-content-father">
                        <div class="function-content-mind-son2-one">
                            <span>职位</span>&nbsp&nbsp<select id="sid" onchange="selectcity()">
                                <option>---请选择---</option>
                                <option>产品经理</option>
                                <option>设计主管</option>
                                <option>设计师</option>
                                <option>前台</option>
                            </select>
                        </div>

                        <div class="function-content-mind-son2-two">
                            <span>职务</span>&nbsp&nbsp<select id="sid" onchange="selectcity()">
                                <option>---请选择---</option>
                                <option>员工</option>
                                <option>经理</option>
                                <option>办事员</option>
                                <option>董事</option>
                            </select>
                        </div>

                        <div class="function-content-mind-son2-three">
                            <span>职级</span>&nbsp&nbsp<select id="sid" onchange="selectcity()">
                                <option>---请选择---</option>
                                <option>p1</option>
                                <option>P2</option>
                                <option>P3</option>
                                <option>P4</option>
                            </select>
                        </div>
                    </div>
                    <div class="function-content-father1">
                        <button style="background-color:#2561ef; font-size: 18px; color: azure;"type="button" class="btn btn-default btn-warning edit"
                        data-toggle="modal" data-target="#myEdit"
                        onclick="edit(this);">+新增</button>
                        <button>导入</button>
                        <button>导出</button>
                        <button>批量删除</button>
                    </div>

                </div>
                <div class="function-content-mind-son3">

                    <div class="function-content-mind-son3-one">
                        <span>部门</span>&nbsp&nbsp<select id="sid" onchange="selectcity()">
                            <option>---请选择---</option>
                            <option>产品部</option>
                            <option>研发部</option>
                            <option>销售部</option>
                            <option>人事部</option>
                        </select>
                    </div>

                    <div class="function-content-mind-son3-two">
                        <span>工作地点</span>&nbsp&nbsp<select id="sid" onchange="selectcity()">
                            <option>---请选择---</option>
                            <option>总部</option>
                            <option>成都分公司</option>
                            <option>杭州分公司</option>
                            <option>北京分公司</option>
                        </select>
                    </div>

                    <div class="function-content-mind-son3-three">
                        <span>选择日期</span>&nbsp&nbsp<select id="sid" onchange="selectcity()">
                            <option>---请选择---</option>
                            <option>2022</option>
                            <option>2021</option>
                            <option>2020</option>
                            <option>2019</option>
                        </select>
                    </div>

                    <div class="function-content-mind-son3-four">
                        <a href=""><input type="text" placeholder="请输入关键字"></a>
                    </div>

                   



                </div>


                <div>
                    <div class="container">
                        <!-- 按钮：用于打开模态框 -->
                        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"
                            id="add">
                            增加用户信息
                        </button>
                        <!-- 模态框1 -->
                        <div class="modal fade" id="myModal">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <!-- 模态框头部 -->
                                    <div class="modal-header">
                                        <h4 class="modal-title">Add Reward info</h4>
                                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                                    </div>
                                    <!-- 模态框主体 -->
                                    <div class="modal-body">
                                        <form>
                                            <div class="form-group">
                                                <label for="email">头像/姓名</label>
                                                <input type="text" class="form-control" id="username"
                                                    placeholder="please into Merchart Name">
                                                <div class="error_box"></div>
                                            </div>
                                            <div class="form-group">
                                                <label for="code">Merchart Code</label>
                                                <input type="text" class="form-control" id="code"
                                                    placeholder="please into Merchart Code">
                                                <div class="error_box"></div>
                                            </div>
                                            <div class="form-group">
                                                <label for="Number">Total Number</label>
                                                <input type="text" class="form-control" id="number"
                                                    placeholder="please into Total Number">
                                                <div class="error_box"></div>
                                            </div>
                                            <div class="form-group">
                                                <label for="State">Start Time</label>
                                                <input type="text" class="form-control" id="start"
                                                    placeholder="please into Start Time">
                                                <div class="error_box"></div>
                                            </div>
                                            <div class="form-group">
                                                <label for="end">end Time</label>
                                                <input type="text" class="form-control" id="end"
                                                    placeholder="please into End Time">
                                                <div class="error_box"></div>
                                            </div>
                                            <div class="form-group">
                                                <label for="state">state</label>
                                                <input type="text" class="form-control" id="state"
                                                    placeholder="please into state">
                                                <div class="error_box"></div>
                                            </div>
                                        </form>
                                    </div>
                                    <!-- 模态框底部 -->
                                    <button type="submit" class="btn btn-primary" id='addbtn'>ADD</button>
                                    <button type="submit" class="btn btn-primary" id="cancle">Cancle</button>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary"
                                            data-dismiss="modal">close</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 模态框结束 -->
                        <!-- 搜索框 -->
                        <input type="text" class="form-control" id="search"
                            placeholder="Please enter the Merchart Name you want to query ">
                        <button type="button" class="btn btn-primary" id="querybtn">搜索</button>
                        <!-- 主题部分 -->
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>
                                        <label>全选</label>
                                        <input type="checkbox" name="item" onclick="checkall(this);">
                                    </th>
                                    <th class="padding-right-xs padding-bottom-xs">头像/姓名</th>
                                    <th class="padding-right-xs padding-bottom-xs">员工编号</th>
                                    <th class="padding-right-xs padding-bottom-xs">部门</th>
                                    <th>职位</th>
                                    <th>入职时间</th>
                                    <th>家人姓名</th>

                                    <th>成员关系</th>
                                    <th>职位</th>
                                    <th>单位名称</th>
                                    <th>出生日期</th>
                                    <th>手机号码</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="tab">
                                <button class="btn btn-primary" id="ALLdel" onclick="delRow()">批量删除</button>
                                <tr>
                                    <td><input type="checkbox" name="item" /></td>
                                    <td class="padding-right-xs padding-top-xxs username">张卾</td>
                                    <td class="padding-right-xs padding-top-xxs">GH000001</td>
                                    <td class="padding-right-xs padding-top-xxs">销售部</td>
                                    <td>产品经理</td>
                                    <td>2020.1.1</td>
                                    <td>张建国</td>
                                    <td>父子</td>
                                    <td>程序员</td>
                                    <td>真的棒手机公司</td>
                                    <td>1996.5.6</td>
                                    <td>1321321321</td>
                                    <td>
                                        <button type="button" class="btn btn-default btn-danger del"
                                            onclick="del(this);" ;>删除</button>
                                        <button type="button" class="btn btn-default btn-warning edit"
                                            data-toggle="modal" data-target="#myEdit"
                                            onclick="edit(this);">编辑</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox" name="item" /></td>
                                    <td class="padding-right-xs padding-top-xxs username">张卾</td>
                                    <td class="padding-right-xs padding-top-xxs">1234567</td>
                                    <td class="padding-right-xs padding-top-xxs">25</td>
                                    <td>产品经理</td>
                                    <td>2020.1.1</td>
                                    <td>张建国</td>
                                    <td>父子</td>
                                    <td>程序员</td>
                                    <td>真的棒手机公司</td>
                                    <td>1996.5.6</td>
                                    <td>1321321321</td>
                                    <td>
                                        <button type="button" class="btn btn-default btn-danger del"
                                            onclick="del(this);" ;>删除</button>
                                        <button type="button" class="btn btn-default btn-warning edit"
                                            data-toggle="modal" data-target="#myEdit"
                                            onclick="edit(this);">编辑</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox" name="item" /></td>
                                    <td class="padding-right-xs padding-top-xxs username">张卾</td>
                                    <td class="padding-right-xs padding-top-xxs">1234567</td>
                                    <td class="padding-right-xs padding-top-xxs">23</td>
                                    <td>产品经理</td>
                                    <td>2020.1.1</td>
                                    <td>张建国</td>
                                    <td>父子</td>
                                    <td>程序员</td>
                                    <td>真的棒手机公司</td>
                                    <td>1996.5.6</td>
                                    <td>1321321321</td>
                                    <td>
                                        <button type="button" class="btn btn-default btn-danger del"
                                            onclick="del(this);">删除</button>
                                        <button type="button" class="btn btn-default btn-warning edit"
                                            data-toggle="modal" data-target="#myEdit"
                                            onclick="edit(this);">编辑</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox" name="item" /></td>
                                    <td class="padding-right-xs padding-top-xxs username">张卾</td>
                                    <td class="padding-right-xs padding-top-xxs">6543210</td>
                                    <td class="padding-right-xs padding-top-xxs">29</td>
                                    <td>产品经理</td>
                                    <td>2020.1.1</td>
                                    <td>张建国</td>
                                    <td>父子</td>
                                    <td>程序员</td>
                                    <td>真的棒手机公司</td>
                                    <td>1996.5.6</td>
                                    <td>1321321321</td>
                                    <td>
                                        <button type="button" class="btn btn-default btn-danger del"
                                            onclick="del(this);">删除</button>
                                        <button type="button" class="btn btn-default btn-warning edit"
                                            data-toggle="modal" data-target="#myEdit"
                                            onclick="edit(this);">编辑</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox" name="item" /></td>
                                    <td class="padding-right-xs padding-top-xxs username">张卾</td>
                                    <td class="padding-right-xs padding-top-xxs">5648527</td>
                                    <td class="padding-right-xs padding-top-xxs">18</td>
                                    <td>产品经理</td>
                                    <td>2020.1.1</td>
                                    <td>张建国</td>
                                    <td>父子</td>
                                    <td>程序员</td>
                                    <td>真的棒手机公司</td>
                                    <td>1996.5.6</td>
                                    <td>1321321321</td>
                                    <td>
                                        <button type="button" class="btn btn-default btn-danger del"
                                            onclick="del(this);">删除</button>
                                        <button type="button" class="btn btn-default btn-warning edit"
                                            data-toggle="modal" data-target="#myEdit"
                                            onclick="edit(this);">编辑</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox" name="item" /></td>
                                    <td class="padding-right-xs padding-top-xxs username">张卾</td>
                                    <td class="padding-right-xs padding-top-xxs">6543210</td>
                                    <td class="padding-right-xs padding-top-xxs">29</td>
                                    <td>产品经理</td>
                                    <td>2020.1.1</td>
                                    <td>张建国</td>
                                    <td>父子</td>
                                    <td>程序员</td>
                                    <td>真的棒手机公司</td>
                                    <td>1996.5.6</td>
                                    <td>1321321321</td>
                                    <td>
                                        <button type="button" class="btn btn-default btn-danger del"
                                            onclick="del(this);">删除</button>
                                        <button type="button" class="btn btn-default btn-warning edit"
                                            data-toggle="modal" data-target="#myEdit"
                                            onclick="edit(this);">编辑</button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <!-- 模态框2 -->
                    <div class="modal fade" id="myEdit">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <!-- 模态框头部 -->
                                <div class="modal-header">
                                    <h4 class="modal-title">Edit Reward info</h4>
                                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                                </div>
                                <!-- 模态框主体 -->
                                <div class="modal-body">
                                    <form>
                                        <div class="form-group">
                                            <label for="email">邮箱</label>
                                            <input type="text" class="form-control" id="change1"
                                                placeholder="输入正确的邮箱地址">
                                        </div>
                                        <div class="form-group">
                                            <label for="code">默认密码</label>
                                            <input type="text" class="form-control" id="change2"
                                                placeholder="输入正确的密码>
                                        </div>
                                        <div class="form-group">
                                            <label for="Number">电话号码</label>
                                            <input type="text" class="form-control" id="change3"
                                                placeholder="电话号码">
                                        </div>
                                        <div class="form-group">
                                            <label for="State">年龄</label>
                                            <input type="text" class="form-control" id="change4"
                                                placeholder="正确的年龄">
                                        </div>
                                        <div class="form-group">
                                            <label for="end">入职时间</label>
                                            <input type="text" class="form-control" id="change5"
                                                placeholder="入职时间">
                                        </div>
                                        <div class="form-group">
                                            <label for="state">学历</label>
                                            <input type="text" class="form-control" id="change6"
                                                placeholder="学历">
                                        </div>
                                    </form>
                                    <button type="submit" class="btn btn-primary" id="edited">Edited</button>
                                    <button type="submit" class="btn btn-primary" id='edit-cancle'>Cancle</button>
                                </div>
                                <!-- 模态框底部 -->
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary"
                                        data-dismiss="modal">close</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 模态框2 end -->
                    <script src="../../Js/ljk-js/OA管理系统.js"></script>
                    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
                    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
                        integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
                        crossorigin="anonymous"></script>

                    <script type="text/javascript" src="user.js"></script>
                    <script>
                        //取消封装的函数
                        function resets() {
                            var inputs = document.getElementsByTagName("input");
                            for (var i = 0; i < inputs.length; i++) {
                                if (inputs[i].type == 'text') {
                                    inputs[i].value = "";
                                } else if (inputs[i].type == 'password') {
                                    inputs[i].value = "";
                                } else if (inputs[i].type == 'checkbox') {
                                    if (inputs[i].checked) {
                                        inputs[i].checked = false;
                                    }
                                } else if (inputs[i].type == 'radio') {
                                    if (inputs[i].checked) {
                                        inputs[i].checked = false;
                                    }
                                }
                            }
                        }
                        //获取编辑表单的jquery元素
                        var change1 = $("#change1");
                        var change2 = $("#change2");
                        var change3 = $("#change3");
                        var change4 = $("#change4");
                        var change5 = $("#change5");
                        var change6 = $("#change6");
                        var parentTr;
                        var modify;
                        edit = function (obj) {
                            var parentTr = obj.parentNode.parentNode;
                            var modity_tr = parentTr.getElementsByTagName("td");
                            change1.val(modity_tr[1].innerText);
                            change2.val(modity_tr[2].innerText);
                            change3.val(modity_tr[3].innerText);
                            change4.val(modity_tr[4].innerText);
                            change5.val(modity_tr[5].innerText);
                            change6.val(modity_tr[6].innerText);
                            //编辑完成
                            $("#edited").on('click', function () {
                                var modity_tr = parentTr.getElementsByTagName("td");
                                modity_tr[1].innerText = change1.val();
                                modity_tr[2].innerText = change2.val();
                                modity_tr[3].innerText = change3.val();
                                modity_tr[4].innerText = change4.val();
                                modity_tr[5].innerText = change5.val();
                                modity_tr[6].innerText = change6.val();
                                alert("恭喜修改成功");
                            });
                            //取消
                            $("#edit-cancle").on("click", function () {
                                resets();
                            })
                        }
                        var search = $("#search");
                        var querybtn = $("#querybtn");
                        var cha = $(".username");
                        var query;
                        search.on("change", function () {
                            query = search.val();
                        })
                        querybtn.on("click", function () {
                            var tr = document.querySelectorAll("tr");
                            //删除所有行
                            for (var k = 1; k < tr.length; k++) {
                                tr[k].remove()
                            }
                            console.log(cha);
                            for (var j = 0; j < cha.length; j++) {
                                if (cha[j].innerText.indexOf(query) >= 0) {
                                    var str = cha[j].parentNode;
                                }
                                tab.append(str);
                            };
                        });
                        ;
                        //删除该行
                        del = function (obj) {
                            var parentTr = obj.parentNode.parentNode;
                            var bool = confirm("小主，确定要删除这行吗?");
                            if (bool) {
                                parentTr.remove() //删除一行
                            };
                        };
                        //全选
                        checkall = function (obj) {
                            var checked = obj.checked;
                            var item = document.getElementsByName("item");
                            for (var i = 0; i < item.length; i++) {
                                if (item[i].checked) {
                                    item[i].checked = null;
                                } else {
                                    item[i].checked = checked;
                                }
                                item[i].checked = checked;
                            }
                        }
                        //删除选中
                        delRow = function () {
                            var items = document.getElementsByName("item");
                            for (var i = 1; i < items.length; i++) {
                                if (items[i].checked) {
                                    var parentNode = items[i].parentNode.parentNode;
                                    var tables = parentNode.parentNode;
                                    tables.removeChild(parentNode);
                                    i--;
                                }
                            }
                        }


                    </script>

<div id="foot" class="football">
<a href="">&lt;&lt; 上一页</a>
<a href="">1</a>
<a href="">2</a>
<a href="">3</a>
<a href="">4</a>
<a href="">5</a>
<a href="">6</a>
<a href="">7</a>
<a href="">8</a>
<a href="">...</a>
<a href="">下一页&gt;&gt;</a>
到第
<input type="text">页
<button>确定</button>
</div>



                </div>



                
            </div>
        </div>
    </div>

    </div>

    <script src="../../Js/ljk-js/day19/jquery-3.6.0.js"></script>
    <script src="../../Js/ljk-js/OA管理系统.js"></script>

</body>

</html>